<template>
  <transition name="slide">
    <div class="page-container--child test-page container-flex">
      <scroller>
        <div class="items">
          <div class="item">
            <div class="title">昵称</div>
            <div class="input-wrapper">
              <input class="item-input" value="刘海" />
            </div>
            <div class="arrow-icon">
              <i class="icons-enter icon"></i>
            </div>
          </div>
        </div>
      </scroller>
    </div>
  </transition>
</template>
<script>
export default {
  components: {
  },
  name: 'App',
  data() {
    return {}
  },
  async created() {

  },
  mounted() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.test-page {
  .items {
    padding: 15px;
    .item {
      display: flex;
      align-items: center;
      height: 60px;

      .title {
        white-space: nowrap;
        width: 60px;
      }

      .input-wrapper {
        flex-grow: 1;
        display: flex;

        .item-input {
          width: 100%;
          text-align: right;
        }
      }

      .arrow-icon {
        margin-left: 10px;
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
